<template>
  <div>
    <!-- 修改 -->
    <div class="box">
      <!-- 新增职位 -->
      <div class="zwei"
           v-show="showModal">
        <div class='Newjob_bg '
             id='coverBox'>
          <div class='Newjob_box'>
            <el-form ref="Newjob"
                     :model="Newjob"
                     label-width="80px">
              <el-form-item>
                <el-col :span="11">
                  <el-form-item label="职位名称">
                    <el-input v-model="Newjob.PositionName"
                              :minlength=1></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="薪资待遇">
                    <el-input v-model="Newjob.Money"></el-input>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-col :span="11"
                        style="text-align:left">
                  <el-form-item label="工作地点">
                    <el-select v-model="Newjob.Area"
                               placeholder="请选择活动区域"
                               style="width:100%">
                      <el-option label="深圳"
                                 value="shenzhen"></el-option>
                      <el-option label="东莞"
                                 value="dongguan"></el-option>
                      <el-option label="苏州"
                                 value="suzhou"></el-option>
                      <el-option label="赣州"
                                 value="ganzhou"></el-option>
                      <el-option label="越南"
                                 value="yuenan"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="工作经验">
                    <el-input v-model="Newjob.Exp"></el-input>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-col :span="11">

                  <!-- <el-form-item label="学历">
                    <el-input v-model="Newjob.Education"></el-input>
                  </el-form-item> -->
                  <el-form-item label="学历">
                    <!-- <el-input v-model="Newjob.Education"></el-input> -->
                    <el-select v-model="Newjob.Education"
                               placeholder="请选择学历"
                               style='width:100%;'>
                      <el-option label="中专及以下"
                                 value="中专及以下"></el-option>
                      <el-option label="大专"
                                 value="大专"></el-option>
                      <el-option label="本科及以上"
                                 value="本科及以上"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="人数">
                    <el-input v-model="Newjob.PersonNum"></el-input>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <!-- 11 -->
              <el-form-item label="">
                <el-col :span="11">
                  <el-form-item label="福利待遇">
                    <el-checkbox-group v-model="Newjob.Tips">
                      <el-checkbox label="五险一金"
                                   name="Tips1"
                                   checked></el-checkbox>
                      <el-checkbox label="绩效奖金"
                                   name="Tips2"
                                   checked></el-checkbox>
                      <el-checkbox label="定期体检"
                                   name="Tips3"
                                   checked></el-checkbox>
                      <el-checkbox label="年终奖金"
                                   name="Tips4"
                                   checked></el-checkbox>
                      <el-checkbox label="包住宿"
                                   name="Tips5"
                                   checked></el-checkbox>
                      <el-checkbox label="带薪年假"
                                   name="Tips6"
                                   checked></el-checkbox>
                      <el-checkbox label="加班补贴"
                                   name="Tips7"
                                   checked></el-checkbox>
                      <el-checkbox label="免费班车"
                                   name="Tips8"
                                   checked></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="状态">
                    <el-select v-model="Newjob.Statu"
                               placeholder="请选择状态"
                               style="width:100%">
                      <el-option label="启用"
                                 value="启用"></el-option>
                      <el-option label="弃用"
                                 value="弃用"></el-option>
                      <el-option label="暂停"
                                 value="停用"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

              </el-form-item>

              <el-form-item label="工作详情">
                <el-input type="textarea"
                          v-model="Newjob.WorkDetail"></el-input>
              </el-form-item>
              <el-form-item label="福利待遇">
                <el-input type="textarea"
                          v-model="Newjob.Welfare"></el-input>
              </el-form-item>
              <el-form-item style="text-align:center">
                <el-button type="primary"
                           @click="CreateNewJob">提交</el-button>
                <el-button @click="getBack,showModal=false">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 删除 -->
      </div>
      <!-- 头部 -->
      <div class="header">
        <!-- 头部左 -->
        <div class="h-lt">
          <div class="h-lt-top">{{objs.PositionName}}</div>
          <div class="h-lt-cen">
            <span class="gongsi">深圳欧陆通电子股份有限公司</span>
            <span class="zhiwei"
                  @click="tiaozhuan">公司介绍</span>
          </div>
          <div class="h-lt-bom">
            <div class="h-lt-bom-top"><span class="miaoshu">{{objs.Area}}&nbsp;&nbsp;|&nbsp;&nbsp;{{objs.Exp}}&nbsp;&nbsp;|&nbsp;&nbsp;{{objs.Education}}&nbsp;&nbsp;|&nbsp;&nbsp;招{{objs.PersonNum}}人&nbsp;&nbsp;|&nbsp;&nbsp;{{time}}发布</span></div>
            <div class="h-lt-bom-bom">
              <div class="hezi"
                   v-for="(item) in tips"
                   :key=item.id>{{item}}</div>
            </div>
          </div>
          <div class="
                   clear"></div>
          <!-- 小屏幕 -->
          <div class="qi">{{objs.Money}}</div>
        </div>
        <div class="h-rt">
          <div class="h-rt-top">
            <el-button type="primary"
                       icon="el-icon-edit"
                       @click="showModal=true">修改</el-button>
          </div>
          <div class="h-rt-bom">{{objs.Money}}</div>
        </div>
        <div class="clear"></div>
      </div>
      <!-- 主体 -->
      <div class="body">
        <div class="biaoti">职位信息</div>
        <div class="bo-xinxi">
          <p v-for="(item3,index3) in xinxi"
             :key="index3">{{item3}}</p>
        </div>
        <div class="zhineng">
          <!-- <p class="leibie"> <span class="qian">职能类别:</span>&nbsp;&nbsp;<span class="hou">Web前端开发</span></p>
          <p class="guanjian"> <span class="qian">前端开发:</span>&nbsp;&nbsp;<span class="hou">web&nbsp;&nbsp;</span><span class="hou">web前端开发</span>&nbsp;&nbsp;<span class="hou">软件开发</span></p> -->
        </div>
      </div>
      <!-- 中心 -->
      <div class="center">
        <div class="biaoti">联系方式</div>
        <div class="dizhi"><span class="qian">上班地址:</span>&nbsp;&nbsp;<span class="hou">固戍二路星辉科技园A栋一楼</span></div>
      </div>
      <!-- 底部 -->
      <div class="footer">
        <div class="biaoti">公司福利</div>
        <div class="fuli">
          <p v-for="(item2,index2) in fuli"
             :key="index2">{{item2}}</p>
        </div>
      </div>
      <!-- 底部按钮 -->
      <!-- <div class="bbtn">
        <el-button type="primary"
                   icon="el-icon-edit"
                   @click="showModal=true">修改</el-button> -->
      <!-- <el-button type="primary"
                   icon="el-icon-delete"
                   @click="deletes">删除</el-button> -->
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import uri from "@/config/uri";
export default {
  data () {
    return {
      showModal: false,
      Newjob: {
        PositionName: '',
        Money: '',
        Area: '',
        Exp: '',
        Education: '',
        PersonNum: '',
        WorkDetail: '',
        Welfare: '',
        Region: '',
        Tips: [],
        Statu: '启用',
        HRJobNo: '',
        tOrg: '',
        tBU: ''
      },
      fileList: [],
      //  接口对象
      objs: {},
      // 发布时间
      time: "",
      // 公司福利
      fuli: [],
      // 职位信息
      xinxi: [],
      // 描述
      tips: [],
      // id号
      id: ""
    }
  },
  created () {
    // 获取职位id号
    let filmID = this.$route.query.id;
    this.id = filmID
    // console.log(this.id)
    // console.log(filmID)
    // let data = { "id": filmID };
    // console.log(filmID)
    // console.log(data)
    this.$http.post(uri.GetRecruitDetail + filmID).then((res) => {
      this.objs = res.data
      this.Newjob.PositionName = this.objs.PositionName
      this.Newjob.Money = this.objs.Money
      this.Newjob.Area = this.objs.Area
      this.Newjob.Exp = this.objs.Exp
      this.Newjob.Education = this.objs.Education
      this.Newjob.PersonNum = this.objs.PersonNum
      this.Newjob.WorkDetail = this.objs.WorkDetail
      this.Newjob.Welfare = this.objs.Welfare
      this.Newjob.tOrg = this.objs.tOrg
      this.Newjob.tBU = this.objs.tBU

      // this.Newjob.Region = this.objs.Region
      this.time = this.objs.CreateTime.substr(0, 10)
      this.fuli = this.objs.Welfare.split("\n")
      this.xinxi = this.objs.WorkDetail.split("\n")
      this.tips = this.objs.Tips.split(",")
      // console.log(this.fuli)
      // console.log(this.xinxi)
      // console.log(this.objs)
    })
  },
  methods: {
    getBack () {
      var coverBox = document.getElementById('coverBox');
    },
    CreateNewJob () {
      let NewjobS = new FormData();
      NewjobS.append('PositionName', this.Newjob.PositionName);
      NewjobS.append('Money', this.Newjob.Money);
      NewjobS.append('Area', this.Newjob.Area);
      NewjobS.append('Exp', this.Newjob.Exp);
      NewjobS.append('Education', this.Newjob.Education);
      NewjobS.append('PersonNum', this.Newjob.PersonNum);
      NewjobS.append('WorkDetail', this.Newjob.WorkDetail);
      NewjobS.append('Welfare', this.Newjob.Welfare);
      NewjobS.append('Region', this.Newjob.Region);
      NewjobS.append('tOrg', this.Newjob.tOrg);
      NewjobS.append('tBU', this.Newjob.tBU);
      NewjobS.append('Id', this.id)
      NewjobS.append('Tips', this.Newjob.Tips);
      NewjobS.append('Statu', this.Newjob.Statu);
      NewjobS.append('HRJobNo', document.cookie.split('|')[1].split(';')[0].split('=')[1]);
      this.showModal = false
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.$http.post(uri.SaveInfo, NewjobS, config).then(res => {
        if (res.status == "200") {
          this.$message({
            message: "提交成功",
            type: "success"
          });
        }
      });
      this.$router.push("/adminindex/");


    },
    tiaozhuan () {
      // 点击跳转
      this.$router.push("/company/");
    },
    // 删除
    // deletes () {
    //   this.$http.post('http://172.16.0.233:8011/api/Recruit/SaveInfo').then(res => {
    //     console.log(res)
    //   })
    // },
    // 修改
    // amend () {

    // }
  }
}
</script>

<style scoped>
/* pc端 */
@media only screen and (min-width: 1200px) {
  .qi {
    display: none;
  }
  .xm {
    display: none;
  }
  body {
    padding: 0;
    margin: 0;
  }
  .box {
    width: 50%;
    margin: 0 auto;
    min-width: 1200px;
    padding-bottom: 120px;
  }
  .clear {
    clear: both;
  }
  .header {
    position: relative;
    padding: 20px 0 30px;
    border-bottom: 1px solid #ccc;
  }
  .h-lt {
    float: left;
  }
  .h-rt {
    float: right;
  }
  .h-lt-top {
    max-width: 340px;
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0 10px 10px 0;
  }
  .gongsi {
    display: inline-block;
    max-width: 380px;
    font-size: 16px;
    color: #333;
  }
  .zhiwei {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    margin: 0 0 0 45px;
    cursor: pointer;
    color: #4e9ad8;
  }
  .h-lt-bom-top {
    margin-bottom: 10px;
  }
  .h-lt-cen {
    margin-bottom: 25px;
  }
  .miaoshu {
    height: auto;
    line-height: 24px;
    font-size: 14px;
    color: #666;
  }
  .hezi {
    float: left;
    height: 20px;
    line-height: 20px;
    color: #ff6000;
    overflow: hidden;
    margin: 0 10px 10px 0;
    padding: 0 5px;
    background-color: #fff2e3;
    font-size: 12px;
  }
  .h-rt-top {
    width: 295px;
    height: 30px;
    line-height: 33px;
    font-weight: bold;
    font-size: 20px;
    color: #ff6000;
    text-align: right;
    margin-bottom: 8px;
    text-align: left;
  }
  .h-rt-bom {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: #fff;
    background-color: #ff6000;
    text-align: center;
    position: absolute;
    width: 295px;
    bottom: 35px;
    right: 0;
    cursor: pointer;
  }
  .biaoti {
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 0;
    margin-top: 15px;
    padding-left: 15px;
    border-left: 4px solid #ff6000;
  }
  .qian {
    font-size: 14px;
    color: #666666;
  }
  .hou {
    color: #333;
    font-size: 14px;
  }
  .body {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }
  .dizhi {
    line-height: 20px;
    margin-top: 25px;
  }
  .center {
    padding: 10px 0 22px;
    border-bottom: 1px solid #ccc;
  }
  .fuli p {
    line-height: 30px;
    margin: 5px 0;
  }
  .Newjob_bg {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 30;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .Newjob_box {
    overflow: auto;
    position: fixed;
    top: 12%;
    left: 5%;
    right: 5%;
    z-index: 11;
    background-color: rgba(255, 255, 255);
    padding: 50px 100px;
  }
}
/* ipad端 */
@media only screen and (min-width: 813px) and (max-width: 1199px) {
  .qi {
    display: none;
  }
  .xm {
    display: none;
  }
  body {
    padding: 0;
    margin: 0;
  }
  .box {
    width: 100%;
    margin: 0 auto;
    /* min-width: 1200px; */
    padding-bottom: 120px;
  }
  .clear {
    clear: both;
  }
  .header {
    position: relative;
    padding: 20px 0 30px;
    border-bottom: 1px solid #ccc;
  }
  .h-lt {
    float: left;
    padding-left: 25px;
  }
  .h-rt {
    float: right;
  }
  .h-lt-top {
    max-width: 340px;
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0 10px 10px 0;
  }
  .gongsi {
    display: inline-block;
    max-width: 380px;
    font-size: 16px;
    color: #333;
  }
  .zhiwei {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    margin: 0 0 0 45px;
    cursor: pointer;
    color: #4e9ad8;
  }
  /* .biaoti p {
    padding-left: 25px;
  } */
  .h-lt-bom-top {
    margin-bottom: 10px;
  }
  .h-lt-cen {
    margin-bottom: 25px;
  }
  .miaoshu {
    height: auto;
    line-height: 24px;
    font-size: 14px;
    color: #666;
  }
  .hezi {
    float: left;
    height: 20px;
    line-height: 20px;
    color: #ff6000;
    overflow: hidden;
    margin: 0 10px 10px 0;
    padding: 0 5px;
    background-color: #fff2e3;
    font-size: 12px;
  }
  .h-rt-top {
    width: 295px;
    height: 30px;
    line-height: 33px;
    font-weight: bold;
    font-size: 20px;
    color: #ff6000;
    text-align: right;
    margin-bottom: 8px;
    text-align: left;
  }
  .h-rt-bom {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: #fff;
    background-color: #ff6000;
    text-align: center;
    position: absolute;
    width: 295px;
    bottom: 35px;
    right: 0;
    cursor: pointer;
  }
  .biaoti {
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 0;
    margin-top: 15px;
    padding-left: 15px;
    border-left: 4px solid #ff6000;
  }
  .qian {
    font-size: 14px;
    color: #666666;
  }
  .hou {
    color: #333;
    font-size: 14px;
  }
  .body {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }
  .dizhi {
    line-height: 20px;
    margin-top: 25px;
    padding-left: 25px;
  }
  .body p {
    padding-left: 15px;
  }
  .center {
    padding: 10px 0 22px;
    border-bottom: 1px solid #ccc;
  }
  .fuli p {
    line-height: 30px;
    margin: 5px 0;
    padding-left: 25px;
  }
  .Newjob_bg {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 30;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .Newjob_box {
    overflow: auto;
    position: fixed;
    top: 5%;
    left: 5%;
    right: 5%;
    z-index: 11;
    background-color: rgba(255, 255, 255);
    padding: 20px 50px;
  }
}
/* 手机端 */
@media only screen and (max-width: 812px) {
  body {
    padding: 0;
    margin: 0;
  }
  .qi {
    font-size: 14px;
    color: #ff6000;
    position: absolute;
    right: 25px;
    top: 5px;
  }
  .box {
    width: 100%;
    margin: 0 auto;
    /* min-width: 1200px; */
    padding-bottom: 55px;
  }
  .clear {
    clear: both;
  }
  .header {
    position: relative;
    padding-top: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
  .h-lt {
    /* float: left; */
    position: relative;
    padding: 0 15px;
  }
  .xm {
    position: absolute;
    right: 0px;
    bottom: -50px;
    border-radius: 2px;
    width: 75px;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background: #ff6000;
    width: 100%;
  }
  .h-rt {
    float: right;
    display: none;
  }
  .h-lt-top {
    width: 210px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 10px 10px 0;
  }
  .gongsi {
    display: inline-block;
    font-size: 16px;
    color: #4e9ad8;
  }
  .zhiwei {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    margin: 0 0 0 45px;
    cursor: pointer;
    color: #4e9ad8;
    display: none;
  }
  .h-lt-bom-top {
    margin-bottom: 10px;
  }
  .h-lt-cen {
    margin-bottom: 12px;
  }
  .miaoshu {
    height: auto;
    line-height: 24px;
    font-size: 13px;
    color: #999;
  }
  .hezi {
    float: left;
    height: 20px;
    line-height: 20px;
    color: #ff6000;
    overflow: hidden;
    /* margin: 0 10px 10px 0; */
    padding: 0 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    background-color: #fff2e3;
    font-size: 12px;
  }
  .h-lt-bom-bom {
    width: 100%;
    /* height: 50px; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .h-rt-top {
    width: 295px;
    height: 30px;
    line-height: 33px;
    font-weight: bold;
    font-size: 20px;
    color: #ff6000;
    text-align: right;
    margin-bottom: 8px;
    text-align: left;
  }
  .h-rt-bom {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: #fff;
    background-color: #ff6000;
    text-align: center;
    position: absolute;
    width: 295px;
    bottom: 35px;
    right: 0;
    cursor: pointer;
  }
  .biaoti {
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 0;
    margin-top: 15px;
    padding-left: 15px;
    border-left: 4px solid #ff6000;
  }
  .bo-xinxi p {
    padding: 0 15px;
  }
  .qian {
    font-size: 14px;
    color: #666666;
  }
  .hou {
    color: #333;
    font-size: 14px;
  }
  .body {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }
  .dizhi {
    line-height: 20px;
    margin-top: 25px;
    padding: 0 15px;
  }
  .center {
    padding: 10px 0 22px;
    border-bottom: 1px solid #ccc;
  }
  .fuli p {
    line-height: 30px;
    margin: 16px 0;
    padding: 0 15px;
  }
  .Newjob_bg {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 30;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
  }
  .Newjob_box {
    overflow: auto;
    position: fixed;
    top: 12%;
    left: 20%;
    z-index: 11;
    background-color: rgba(255, 255, 255);
    padding: 50px 100px;
    display: none;
  }
}
</style>